<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      .box {
         width: 100vw;
         height: 100vh;
         background: aqua;
      }

      .top {
         width: 5.2vw;
         height: 5.2vw;
         background: red;
      }

      .bottom {
         margin-top: 10vh;
         width: 5.2vw;
         height: 5.2vw;
         background: rgb(0, 157, 255);
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="top">

      </div>
      <div class="bottom">

      </div>
   </div>
</body>

</html>

<script>
   // vw vh 解决适配问题:IE8以上
   //Echarts不支持vm vh 支持px

   //scale方法实现
</script>